<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<html>
	<head>
		<meta charset="utf-8">
		<title>历史</title>
		<script type="text/javascript">
			function deleteHis(vid) {
				var u = $("[name='"+vid+"']").attr("id");
				window.location.href="/deleteHis/"+u
			}
			function deleteManyHis() {
				window.location.href="/deleteManyHis"
			}
		</script>
		
		<!--移动设备优先-->
		<meta name="viewport" content="width=device-width,initial-scale=1,sharing-to-fit=no">
		
		<!--引入Bootstrap CSS-->
		<link rel="stylesheet" type="text/css" th:href="@{/css/font-awesome.min.css}">
		<link rel="stylesheet" th:href="@{/css/bootstrap.css}">
		<link rel="stylesheet" th:href="@{/css/timeline.css}">
		
		<style>
			.user{
				width:30px;
				height:30px;
				border-radius: 50%;
				border: #000000 1px solid;
			}
			.profile{
				width:70px;
				height:70px;
				border-radius: 50%;
				border: #000000 1px solid;
			}
			.collect{
				width: 280px;
				height: 180px;
				border-radius: 3%;
			}
		</style>
	</head>
	<body>
		<!--导航栏开始-->
		<iframe th:src="@{/navigation/navigationBar.html}"
				frameBorder="0" width="100%" scrolling="no" height="70px"></iframe>
		<!--导航栏结束-->

		
		<!--时间轴开始-->
		<div class="container mt-4">
			<div class="row">
				<div class="col-md-12">
					<div class="card-header"style="background-color: white;">
						<h4 class="d-inline-block">⏰ 历史记录</h4>
						<a class="btn btn-outline-info ml-4 float-md-right d-inline-block" href="#" role="button">暂停记录历史</a>
						<a class="btn btn-outline-info ml-4 float-md-right d-inline-block" href="#" role="button" th:onclick="|javascript:deleteManyHis()|">清空历史</a>
					</div>
				</div>
			</div>
			
			<div class="row">
				<div class="col-md-12">
					<div class="timeline timeline-single-column ml-5 mt-4">
						<span th:each="his,in:${allHis}">
							<span th:id="${his.video.vid}" th:name="${in.count}" />
						<div class="timeline-item mt-4">
							<div class="timeline-point timeline-point-blank"></div>
							<div class="timeline-event">
								<div class="media mx-2 my-2">
								  <img th:src="@{/vimg/}+${his.video.vid}+@{.png}" class="mr-3" style="width: 240px;height: 150px" alt="...">
								  <div class="media-body">
								    <h6 class="mt-0" th:text="${his.video.vname}"></h6>
								    <p><small class="text-muted" th:text="${his.nickname}"></small></p>
									<p><small class="text-muted">🖥 看到 0:00</small>
									<button type="button" class="btn btn-outline-dark d-inline-block float-right mr-5" th:onclick="|javascript:deleteHis(${in.count})|">删除</button>
									</p>
									<hr />
									<p><h6 class="text-right mr-5 text-info">2021-12-09</h6></p>
								  </div>
								</div>	
							</div>
						</div>
						</span>
						
						<span class="timeline-label">
							<span class="badge badge-info">一周前</span>
						</span>
						
						<!--标准事件块-->
						<div class="timeline-item">
							<div class="timeline-point timeline-point-blank"></div>
							<div class="timeline-event">
								<div class="media mx-2 my-2">
								  <img th:src="@{/img/I01.jpg}" class="mr-3" alt="..." style="width: 240px;height: 150px">
								  <div class="media-body">
								    <h6 class="mt-0">MAYDAY五月天 歌单合集</h6>
								    <p><small class="text-muted">MAYDAY五月天 [ 轉眼 Final Chapter ]</small></p>
									<p><small class="text-muted">🖥 看到 3:21</small>
									<button type="button" class="btn btn-outline-dark d-inline-block float-right mr-5">删除</button>
									</p>
									<hr />
									<p><h6 class="text-right mr-5 text-info">2021-01-03</h6></p>
								  </div>
								</div>	
							</div>
						</div>
						
						<div class="timeline-item">
							<div class="timeline-point timeline-point-blank"></div>
							<div class="timeline-event">
								<div class="media mx-2 my-2">
								  <img th:src="@{/img/I02.jpg}" class="mr-3" alt="..." style="width: 240px;height: 150px">
								  <div class="media-body">
								    <h6 class="mt-0">MAYDAY五月天 歌单合集</h6>
								    <p><small class="text-muted">MAYDAY五月天 [ 轉眼 Final Chapter ]</small></p>
									<p><small class="text-muted">🖥 看到 3:21</small>
									<button type="button" class="btn btn-outline-dark d-inline-block float-right mr-5">删除</button>
									</p>
									<hr />
									<p><h6 class="text-right mr-5 text-info">2020-12-29</h6></p>
								  </div>
								</div>	
							</div>
						</div>
						
						<span class="timeline-label">
							<span class="badge badge-info">一个月前</span>
						</span>
						
						<div class="timeline-item">
							<div class="timeline-point timeline-point-blank"></div>
							<div class="timeline-event">
								<div class="media mx-2 my-2">
								  <img th:src="@{/img/I03.jpg}" class="mr-3" alt="..." style="width: 240px;height: 150px">
								  <div class="media-body">
								    <h6 class="mt-0">MAYDAY五月天 歌单合集</h6>
								    <p><small class="text-muted">MAYDAY五月天 [ 轉眼 Final Chapter ]</small></p>
									<p><small class="text-muted">🖥 看到 3:21</small>
									<button type="button" class="btn btn-outline-dark d-inline-block float-right mr-5">删除</button>
									</p>
									<hr />
									<p><h6 class="text-right mr-5 text-info">2020-12-01</h6></p>
								  </div>
								</div>	
							</div>
						</div>
						
					</div>
				</div>
				
			</div>
		</div>
				

		<!--时间轴结束-->
		
		<!--引入 JavaScript文件和jQuery-->
		<!--引入顺序：jQuery，然后Popper.js，然后Bootstrap.js-->
		<script th:src="@{/js/jquery.min.js}"></script>
		<script th:src="@{/js/bootstrap.bundle.js}"></script>
	</body>
</html>
